import React from 'react';
import JiaoYi from './jiaoyi';
import ChiCang from './chicang';
import './style/shipanjiaoyi.css';
const tabData = [
    { title: '交易', key: 0 },
    { title: '持仓', key: 1 },
    { title: '结算', key: 2 },

];

class ShiPanJiaoYi extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0,
            tabIndex2: 0,
            listIndex: 0
        }
        this.data = this.props.location.query ? this.props.location.query.data : null;
        this.type = this.props.location.query ? this.props.location.query.type : null;
    }

    //tab切换
    jumpTab(index) {
        this.setState({
            tabIndex: index,
        })
    }
    selectTab = (v) => {
        this.setState({
            tabIndex: v
        })
    }

    goBack = () => {
        this.props.history.goBack();
    }

    jumpRule() {
        this.props.history.push({ pathname: "/guize" });
    }

    render() {
        const { tabIndex } = this.state
        return (
            <div className='wodezhangdan' style={{ overflow: 'hidden' }}>

                <div className='navtor'>
                    <div className='backDiv' onClick={() => this.goBack()}> <img alt='' src={require('./img/chongzhi/left.png')}></img></div>
                    <div className='tabs'>
                        <div className='titleList'>
                            {
                                tabData && tabData.map((item, index) => {
                                    return <div onClick={() => this.jumpTab(index)} key={index} className={tabIndex === index ? "titleTrue" : 'titleItem'} >{item.title}</div>
                                })
                            }
                        </div>
                    </div>
                    <div className='rules' onClick={() => this.jumpRule()}> 规则</div>
                </div>
                {/* <div className='wodezhangdanNavbar'>
                    <img onClick={this.goBack} className='wodezhangdanNavbarArrow' alt='' src={require('./img/chongzhi/left.png')} />
                    <div className='wodezhangdanNavbarTitle'>
                        {
                            tabData && tabData.map((v, k) => {
                                let select = '';
                                if (this.state.tabIndex === v.key) {
                                    select = 'select';
                                }
                                return <span className={`${select}wodezhangdanNavbarTitleItem`} onClick={() => this.selectTab(v.key)} key={v + k}>{v.title}</span>
                            })
                        }
                    </div>
                </div> */}
                {/* style={{
                    transform: `translateX(-${this.state.tabIndex / 3 * 100}%)`
                }}  */}
                <div className='scrollTab' >
                    {
                        tabIndex === 0 ? <div className='wodezhangdan-firsttab'>
                            <JiaoYi data={this.data} ></JiaoYi>
                        </div> : tabIndex === 1 ? <div className='wodezhangdan-secondtab'>
                            <ChiCang data={this.data}></ChiCang>
                        </div> : this.renderThree()
                    }


                </div>
            </div>
        )
    }
    //title2点击
    tabList(index) {
        this.setState({
            tabIndex2: index
        })
    }
    //点击list展开
    jumpListItem(index) {
        const { listIndex } = this.state
        if (listIndex === index) index = -1
        this.setState({
            listIndex: index
        })
    }
    renderThree() {
        const { tabIndex2, listIndex } = this.state
        return <div className="newScoll">
            <div className="tab" style={{ paddingBottom: 0 }}>
                {
                    ["时间", "盈利", "金额", "手续费"].map((item, index) => {
                        return <div key={index} className="tabItem" onClick={() => this.tabList(index)} style={{ color: tabIndex2 === index ? "#333333" : '#999', fontWeight: tabIndex2 === index ? "bold" : 'normal' }}>
                            <div style={{ paddingBottom: '1rem', justifyContent: "center" }} className="flex align-center">
                                {item}
                                <img className='iconTop' src={require('./img/iconTop.png')}></img>
                            </div>
                            {
                                index === tabIndex2 ? <div className="titleIconTrue"></div> : <div className="titleIconFalse"></div>
                            }
                        </div>
                    })
                }
            </div>
            <div className="content">
                {
                    [1, 2, 3].map((item, index) => {
                        return <div key={index} className="flexItem">
                            {
                                !this.type  ? <img className='xuni' src={require('./img/xuni.png')}></img> : null
                            }

                            <div className="flex">
                                <div className="title" style={{ display: "flex", justifyContent: "space-between" }}>
                                    <span style={{ fontSize: "1.6rem" }}>德指DAX</span>
                                    <span className="shou">1手--{tabIndex2}</span>
                                </div>
                                <div className="title">
                                    <span>交易盈亏：</span>
                                    <span style={{ color: "#28D1A7" }}>-378.00</span>
                                </div>
                            </div>
                            <div className="newFlex">
                                <div className="flex-1">开仓价格：23212</div>
                                <div className="flex-1">开仓手数：1手</div>
                            </div>
                            <div className="newFlex">
                                <div className="flex-1">开仓方向：<span style={{ color: "#FC5656" }}>买涨</span></div>
                                <div className="flex-1">平仓方式：手动平仓</div>
                            </div>
                            <div className="newFlex">
                                <div className="flex-1">保证金：￥2323.00</div>
                                <div className="flex-1 align-center" onClick={() => this.jumpListItem(index)} style={{ display: "flex", justifyContent: "space-between" }}>
                                    <span>手续费：￥23.00</span>
                                    {
                                        index === listIndex ? <img className="imgIcon" src={require('./img/help/icon2.png')} /> : <img className="imgIcon" src={require('./img/help/icon1.png')} />
                                    }
                                </div>
                            </div>
                            {
                                index === listIndex ? <div>
                                    <div className="newFlex">
                                        <div className="flex-1">触发止盈：￥2323.00</div>
                                        <div className="flex-1">触发止损：￥23.00</div>
                                    </div>
                                    <div className="newFlex">
                                        <div className="flex-1">开仓时间：2020-01-21 12:23:34</div>
                                    </div>
                                    <div className="newFlex">
                                        <div className="flex-1">平仓时间：2020-01-21 12:23:34</div>
                                    </div>
                                </div> : null
                            }
                        </div>
                    })

                }

            </div>
        </div >
    }
}

export default ShiPanJiaoYi;